<html>
<head>
	<title>SPE: Mouse follow</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<p class="numParticles"></p>

    <script type="text/javascript" src="./js/THREE-r84.js"></script>
    <script type="text/javascript" src="./js/Stats.min.js"></script>
    <script type="text/javascript" src="../build/SPE.min.js"></script>

	<script type="text/javascript">
		// variables used in init()
        var scene, camera, renderer, stats, stats2, clock;

        // Used in initParticles()
		var emitter, particleGroup;

        // Mouse co-ords
        var mouseX, mouseY, mouseVector = new THREE.Vector3();

		// Setup the scene
        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);
            camera.position.z = 50;
            camera.lookAt( scene.position );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor(0x000000);

            stats = new Stats();
            clock = new THREE.Clock();

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0';

            document.body.appendChild( renderer.domElement );
            document.body.appendChild( stats.domElement );
        }

        // Create particle group and emitter
        function initParticles() {
        	particleGroup = new SPE.Group({
        		texture: {
                    value: THREE.ImageUtils.loadTexture('./img/smokeparticle.png')
                }
        	});

        	emitter = new SPE.Emitter({
                maxAge: 3,
        		position: {
                    value: new THREE.Vector3(0, 0, 0)
                },

                acceleration: {
                    value: new THREE.Vector3(0, -5, 0),
                    spread: new THREE.Vector3(5, 0, 5)
                },

                velocity: {
                    value: new THREE.Vector3(0, 10, 0)
                },

                color: {
                    value: [ new THREE.Color( 0.5, 0.5, 0.5 ), new THREE.Color() ],
                    spread: new THREE.Vector3(1, 1, 1),
                },
                size: {
                    value: [5, 0]
                },

        		particleCount: 1500
        	});

        	particleGroup.addEmitter( emitter );
        	scene.add( particleGroup.mesh );

        	document.querySelector('.numParticles').textContent =
        		'Total particles: ' + emitter.particleCount;
        }



        function animate() {
            requestAnimationFrame( animate );

            // Using a fixed time-step here to avoid pauses
            render( 0.016 );
            stats.update();
        }


        function render( dt ) {
            particleGroup.tick( dt );
            renderer.render( scene, camera );
        }


        // Add mousemove listener to move the `emitter`.
        document.addEventListener( 'mousemove', function( e ) {
            mouseVector.set(
                (e.clientX / window.innerWidth) * 2 - 1,
                -(e.clientY / window.innerHeight) * 2 + 1,
                0.5
            );

            mouseVector.unproject( camera );
            emitter.position.value = emitter.position.value.set( mouseVector.x * camera.fov, mouseVector.y * camera.fov, 0 );
        }, false );


        window.addEventListener( 'resize', function() {
            var w = window.innerWidth,
                h = window.innerHeight;

            camera.aspect = w / h;
            camera.updateProjectionMatrix();

            renderer.setSize( w, h );
        }, false );


        init();
        initParticles();

        setTimeout(animate, 0);

	</script>

</body>
</html>
